<!DOCTYPE html>
<script src="../../resources/check-layout.js"></script>
<p>Test that space is reserved for the top margin of a float that is pushed to the next column. It
    gets pushed to next column because its child block wants to move. The child block wants to move
    because its first line cannot fit at its designated position in the first column.</p>
<p>There should be a blue rectangle below.</p>
<div id="test" style="position:relative; -webkit-columns:3; -webkit-column-gap:0; column-fill:auto; width:150px; height:90px; line-height:20px;">
    <div style="margin-top:5px; margin-bottom:15px; height:40px; background:blue;"></div>
    <br>
    <div data-offset-y="5" style="float:left; width:100%; margin-top:5px; background:blue;">
        <div data-offset-y="5">
            <br><br>
        </div>
    </div>
</div>
<script>
    checkLayout("#test");
</script>
